<template>
  <div style="background-color: red;width: 100%;height: 200px;">
      header
      <slot name="header"></slot>
  </div>
  <div style="background-color: blue;width: 100%;height: 200px;">
      中间
      <div v-for="(item,index) in list" :key="index">
          <slot :index="index" :data="item"></slot>
      </div>
  </div>
  <div style="background-color: forestgreen;width: 100%;height: 200px;">
    foot
    <slot name="foot"></slot>
  </div>
</template>

<script setup lang='ts'>
import { reactive } from 'vue';


type TList = {
    name:string
}
const list = reactive<TList[]>([
    {
        name:'chen'
    },
    {
        name:'gang'
    },
    {
        name:'long'
    },
])


</script>

<style lang='scss' scoped>

</style>
